<template>
	<view class="tar">
		<image src="../../static/icon30.png" mode="aspectFill" class="icon1" @click="handleNextOrPrev('local')"></image>
		<view class="tar-view" style="margin-left: 40rpx;" @click="handleNextOrPrev('prev')">
			<image src="../../static/icon31.png" mode="aspectFill" class="icon2" style="margin-right: 12rpx;"></image>
			<text>上一位</text>
		</view>
		<image src="../../static/icon_operator_0.png" mode="aspectFill" class="icon3" @click="handleNextOrPrev('current')"></image>
		<view class="tar-view" style="margin-right: 40rpx;" @click="handleNextOrPrev('next')">
			<text>下一位</text>
			<image src="../../static/icon33.png" mode="aspectFill" class="icon2" style="margin-left: 12rpx;"></image>
		</view>
		<view class="icon1" >
			
		</view>
		<!-- <image src="../../static/icon34.png" mode="aspectFill" class="icon1" @click="handleNextOrPrev('icon')"></image> -->
	</view>
</template>

<script>
	export default{
		methods:{
			handleNextOrPrev(str) {
				this.$emit('onTarClick', str)
			}
		}
	}
</script>

<style scoped>
	.tar{
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 588rpx;
		padding: 0 36rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
	}
	.icon{
		width: 30rpx;
		height: 30rpx;
	}
	.icon1{
		width: 42rpx;
		height: 42rpx;
	}
	.tar-view{
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.icon2{
		width: 23rpx;
		height: 24rpx;
	}
	.icon3{
		box-sizing: border-box;
		width: 115rpx;
		height: 110rpx;
		margin: 0 36rpx;
		border-radius: 50%;
		border: 3rpx #fff solid;
	}
</style>
